<template>
	<div class="body-manager">
		<Header />
		<main>
			<div class="sidebar">
				<el-menu class="bar-menu" router default-active="/manage/user">
					<el-menu-item index="/manage/user">
						<el-icon><User /></el-icon>
						<span>用户管理</span>
					</el-menu-item>
					<el-menu-item index="/manage/algorithm">
						<el-icon><Document /></el-icon>
						<span>算法管理</span>
					</el-menu-item>
					<el-menu-item index="/manage/model">
						<el-icon><Setting /></el-icon>
						<span>模版管理</span>
					</el-menu-item>
				</el-menu>
			</div>
			<div class="main-content">
				<router-view />
			</div>
		</main>
		<Footer />
	</div>
</template>

<script setup>
	import Header from '@/components/Header/index.vue'
	import Footer from '@/components/Footer/index.vue'
</script>

<style lang="scss" scoped>
	.body-manager {
		width: 100vw;
		height: 100vh;
	}

	main {
		height: calc(100% - 175px);
		display: flex;
	}

	.sidebar {
		width: 20%;
		height: 100%;
		background: #e7e7e7;
		.bar-menu {
			.el-menu-item {
				border: 1px solid #e7e7e7;
				font-size: 18px;
				font-weight: bold;
			}
		}
	}

	.main-content {
		flex: 1;
		padding: 20px;
	}
</style>